<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>小视频页</title>

<link href="../../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 

<link rel="stylesheet" href="../../css/PetDynamics/petvideo.css">

<!--可无视-->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!--主要样式-->
<style type="text/css">


</style>

</head>
<body>

          <nav class="navbar navbar" role="navigation" style="width: 100%">
        <div class="navbar-brand">
          <a class="navbar-brand" href="#">
            <img src="" alt=""></a>
        </div>
        <div class="navbar-brand">
          <form class="form-horizontal" role="form">
            <div class="form-group has-feedback">
              <div class="modal-md">
                <span class="glyphicon glyphicon-search form-control-feedback" style="font-size:20px "></span>
                <input type="text" class="form-control input-lg" placeholder="搜'柴犬'试试" id="search">
              </div>
            </div>
          </form>
        </div>
        <!--右边-->
        <!-- <div> -->
        <ul class="nav navbar-nav navbar-right">
			<li class="pure-menu-selected"><a href="../index.html" class="mynav-underline-active"><b>首页</b></a></li>
			<li><a href="../forum/forum.html" class="nav-underline"><b>论坛</b></a></li>
			<li><a href="../PetDynamics/dynamic.html" class="nav-underline"><b>宠物动态</b></a></li>
			<li><a href="../trading/homepage.html" class="nav-underline"><b>二手市场</b></a></li>
			<li><a href="../fun-function.html" class="nav-underline"><b>趣味专区</b></a></li>
			<li><a href="../message-centre.html" class="nav-underline"><b>消息中心</b></a></li>
			<li><a href="../PetPerson/person.html" class="nav-underline"><b>我的</b></a></li>

        </ul>

      </nav>

<div class="message">
	<form method="post" action="" enctype="multipart/form-data">
		<input type="text" id="txt" name="txt" class="input" value="选择一个视频文件" disabled="disabled">
		<input type="button" onmousemove="f.style.pixelLeft=event.x-60;f.style.pixelTop=this.offsetTop;" value="上传视频" size="30" onclick="f.click()" class="liulan">
		<input type="file" id="f" onchange="txt.value=this.value" name="f" style="height:26px;" class="files" size="1" hidefocus="">
	</form>
</div>

<div class="video">
	<div class="container" style="margin-top: 6px">
		<div class="videolist" vpath="v1.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4">
			<div class="vtit">视频一</div>
			<img src="../../imgs/petvideo/v1.jpg" width="540px" height="300px" />
            <div class="vtime">2018-06-22</div>
			<img src="../../imgs/petvideo/play.png" class="videoed">
        </div>
        
		<div class="videolist" vpath="v2.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4">
			<div class="vtit">视频一</div>
			<img src="../../imgs/petvideo/v2.jpg" width="540px" height="300px" />
			<div class="vtime">2018-06-22</div>
			<img src="../../imgs/petvideo/play.png" class="videoed">
        </div>
        <div class="videolist" vpath="v1.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4">
			<div class="vtit">视频一</div>
			<img src="../../imgs/petvideo/v1.jpg" width="540px" height="300px" />
			<div class="vtime">2018-06-22</div>
			<img src="../../imgs/petvideo/play.png" class="videoed">
		</div>
		<div class="videolist" vpath="v2.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4">
			<div class="vtit">视频一</div>
			<img src="../../imgs/petvideo/v2.jpg" width="540px" height="300px" />
			<div class="vtime">2018-06-22</div>
			<img src="../../imgs/petvideo/play.png" class="videoed">
        </div>
        <div class="videolist" vpath="v1.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4">
			<div class="vtit">视频一</div>
			<img src="../../imgs/petvideo/v1.jpg" width="540px" height="300px" />
			<div class="vtime">2018-06-22</div>
			<img src="../../imgs/petvideo/play.png" class="videoed">
		</div>
		<div class="videolist" vpath="v2.jpg" ipath="https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_CinematicTrailer.mp4">
			<div class="vtit">视频一</div>
			<img src="../../imgs/petvideo/v2.jpg" width="540px" height="300px" />
			<div class="vtime">2018-06-22</div>
			<img class="play" src="../../imgs/petvideo/play.png" class="videoed">
		</div>

        <!-- <div class="videos" style="display: block;">
            <video id="video" poster="v1.jpg" style="width: 640px" src="https://blz-videos.nosdn.127.net/1/OverWatch/OVR-S03_E03_McCree_REUNION_zhCN_1080P_mb78.mp4" preload="auto" controls="controls" autoplay="autoplay"></video>
            <img onclick="close1()" class="vclose" src="../../imgs/petvideo/gb.png" width="25" height="25">
        </div>		 -->
		<div class="videos"></div>
	</div>
</div>




    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>

    <script>
        $(document).ready(function () {
            $("#search").focus(function () {
                $(this).css("padding-right", "200.5px")
            });
            $("#search").blur(function () {
                $(this).css("padding-right", "42.5px")
            });
        });

    </script>



<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript">
$('.videolist').each(function(){ //遍历视频列表
	$(this).hover(function(){ //鼠标移上来后显示播放按钮
		$(this).find('.videoed').show();
	},function(){
		$(this).find('.videoed').hide();
	});
	$(this).click(function(){ //这个视频被点击后执行
		var img = $(this).attr('vpath');//获取视频预览图
		var video = $(this).attr('ipath');//获取视频路径
		$('.videos').html("<video id=\"video\" poster='"+img+"' style='width: 640px' src='"+video+"' preload=\"auto\" controls=\"controls\" autoplay=\"autoplay\"></video><img onClick=\"close1()\" class=\"vclose\" src=\"../../imgs/petvideo/gb.png\" width=\"25\" height=\"25\">");
		$('.videos').show();
	});
});

function close1(){
	var v = document.getElementById('video');//获取视频节点
	$('.videos').hide();//点击关闭按钮关闭暂停视频
	v.pause();
	$('.videos').html();
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>来源：<a href="" target="_blank">素材</a></p>
</div>
</body>
</html>
